﻿<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>匿名聊天室</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style type="text/css">
        @media screen and (min-width: 320px) and (max-width: 1156px) {
            .talk_con_mob {
                width: 600px;
                height: 500px;
                border: 1px solid #666;
                margin: 50px auto 0;
                background: #f9f9f9;
            }

            .talk_show_mob {
                width: 580px;
                height: 420px;
                border: 1px solid #666;
                background: #fff;
                margin: 10px auto 0;
                overflow: auto;
            }

            .talk_input_mob {
                width: 580px;
                margin: 10px auto 0;
            }

            .talk_word_mob {
                width: 420px;
                height: 26px;
                padding: 0px;
                float: left;
                margin-left: 10px;
                outline: none;
                text-indent: 10px;
            }
        }

        .talk_con {
            width: 600px;
            height: 500px;
            border: 1px solid #666;
            margin: 50px auto 0;
            background: #f9f9f9;
        }

        .talk_show {
            width: 580px;
            height: 420px;
            border: 1px solid #666;
            background: #fff;
            margin: 10px auto 0;
            overflow: auto;
        }

        .talk_input {
            width: 580px;
            margin: 10px auto 0;
        }

        .whotalk {
            width: 80px;
            height: 30px;
            float: left;
            outline: none;
        }

        .talk_word {
            width: 420px;
            height: 26px;
            padding: 0px;
            float: left;
            margin-left: 10px;
            outline: none;
            text-indent: 10px;
        }

        .talk_sub {
            width: 56px;
            height: 30px;
            float: right;
            margin-right: 10px;
        }

        .atalk {
            margin: 10px;
        }

        .atalk span {
            display: inline-block;
            background: #0181cc;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }

        .btalk {
            margin: 10px;
            text-align: right;
        }

        .sys {
            margin: 10px;
            text-align: center;
        }

        .btalk span {
            display: inline-block;
            background: #ef8201;
            border-radius: 10px;
            color: #fff;
            padding: 5px 10px;
        }
    </style>
    <script>
        var socket = new WebSocket("ws://127.0.0.1:5000/message");
        socket.onmessage = function (event) {
            try {
                message = JSON.parse(event.data)
                if (message["mine"] == true) {
                    chat_mine()
                } else {
                    chat_other()
                }
                if (message["type"] == "login" ||
                    message["type"] == "logout") {
                    insertHTML = "<div class='sys'>" +
                        "<span id='bsay'>" + message["text"] + "</span></div>"
                    $(".talk_show").append(insertHTML)
                }
            } catch (e) {
                console.log(e)
                console.log(event)
            }
        };

        function chat_mine() {
            if (message["type"] == "chat") {
                insertHTML = "<div class='btalk'>" +
                    "<span id='bsay'>" + message["ip"] + "-" + message["time"] + ":<br>" + message["text"] + "</span></div>"
                $(".talk_show").append(insertHTML)
            }
        }

        function chat_other() {
            if (message["type"] == "chat") {
                insertHTML = "<div class='atalk'><span id='asay'>" + message["ip"] + "-" + message["time"] + ":<br>" + message["text"] + "</span></div>"
                console.log(insertHTML)
                $(".talk_show").append(insertHTML)
            }
        }

        $(function () {
            $("#talksub").click(function () {
                //展示信息在屏幕上
                message = $("#talkwords").val()
                socket.send(message)
                $("#talkwords").val("")
            })
        })

        function InputPress() {
            if (event.keyCode == 13) {
                message = $("#talkwords").val()
                socket.send(message)
                $("#talkwords").val("")
            }
        }
    </script>
</head>
<body>
<div class="talk_con" id="talk_con_id">
    <div class="talk_show" id="words">
        <div class="atalk"><span id="asay">欢迎进入模拟客户聊天</span></div>
    </div>
    <div class="talk_input" id="talk_input_id">
        <input type="text" class="talk_word" id="talkwords" onkeypress="InputPress()">
        <input type="button" value="发送" class="talk_sub" id="talksub">
    </div>
</div>
</body>
</html>



























